<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorSystem</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="BlazorSystem.Client.styles.css" rel="stylesheet" />
    <script>
        const modelSelect = document.getElementById("modelSelect");

        // 获取模型选项内容
        fetch("/FetchModelList", { method: "POST" })
            .then(response => response.text())
            .then(data => {
                const options = data.split(",");
                options.forEach(option => {
                    const optionElement = document.createElement("option");
                    optionElement.value = option;
                    optionElement.textContent = option;
                    modelSelect.appendChild(optionElement);
                });
            });

        // 登录验证
        const loginForm = document.querySelector("form");
        loginForm.addEventListener("submit", async e => {
            e.preventDefault();
            const formData = new FormData(loginForm);
            const data = [
                formData.get("usernameInput"),
                formData.get("passwordInput")
            ];
            const response = await fetch("/Login", {
                method: "POST",
                body: JSON.stringify(data),
                headers: { "Content-Type": "application/json" }
            });
            if (response.ok) {
                window.location.replace("/chat");
            } else {
                alert("Wrong username or password");
            }
        });
    </script>
</head>

<body>
    <div id="app">载入中...</div>

    <div id="blazor-error-ui">
        发生了无法处理的错误.
        <a href="" class="reload">刷新</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>

</html>
